<template>
  <div class="box">
    <div class="box1">
     <img class="tp" src="../dynamic/tupian/d1.png" alt="">
    <div>
      <span class="zt">宠派</span>
    </div>
    <div class="zt1">PET BABY</div>
    </div>
    <div class="box2">
    <router-link to="dlk"><button class="al">快速登录 </button></router-link>
    <div class="sa"><button class="al1"> 创建新账号</button></div>
    <div class="sd">
      <span class="al2">已有账号？</span>
      <span class="al3"> 马上登录</span>
    </div>
    <div>
      <img class="tp1" src="../dynamic/tupian/d2.png" alt="">
      <img class="tp1" src="../dynamic/tupian/d3.png" alt="">
      <img class="tp1" src="../dynamic/tupian/d4.png" alt="">
    </div>
    <div class="box3">
      <span class="wz1">通过签署</span>
      <input type="checkbox">
      <span class="wz1">你将遵守我们的</span>
      <span class="wz2">服务条款</span>
      <input type="checkbox">
     <span class="wz1">并且已经阅读了我们的</span>
     <span class="wz2">隐私条款</span>
    </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.box1{
 text-align: center;
 width: 100%;
}
.tp{
  margin-top: 100px;
  left: 50%;
  right: 50%;
}
.tp1{
  margin-left: 40px;
  margin-top: 20px;
}
.zt{
 font-size: 20px;
 font-weight: bold;
 color: rgb(236, 55, 85);
}
.zt1{
 color: rgb(236, 55, 85);
 font-size: 10px;
 font-weight: bold;
}
.box2{
  margin-top: 40px;
  text-align: center;
 width: 100%;
}
.sa{
  margin-top: 20px;
}
.sd{
  margin-top: 40px;
}
.al{
  width: 300px;
  height: 40px;
  background-color: rgb(54, 183, 54);
  color: white;
  font-weight: bold;
  border-radius: 20px;
  border: 1px  rgb(54, 183, 54);
}
.al1{
  width: 300px;
  height: 40px;
  background-color:rgb(236, 55, 85);
  color: white;
  font-weight: bold;
  border-radius:  20px ;
  border: 1px rgb(236, 55, 85);
}
.al2{
  font-size: 10px;
  font-weight: bold;
}
.al3{
  font-size: 10px;
  font-weight: bold;
  color: rgb(185, 137, 230);
}
.gx{
  width: 20px;
  height: 15px;
}
.wz1{
  font-size: 10px;
}
.wz2{
  font-size: 10px;
  color: rgb(185, 137, 230);
}
.box3{
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  text-align: center;
  }
  .box{
    height: 100vh;
    z-index: 20;
    background-color: white;
  }
</style>